<!--
 * @Descripttion: 
 * @version: 
 * @Author: seehar
 * @Date: 2021-09-28 22:47:34
 * @LastEditors: seehar
 * @LastEditTime: 2021-10-06 21:04:31
-->
<template>
  <div class="home" ref="Box" @scroll="handleScroll">
    <el-carousel>
      <el-carousel-item v-for="item in imgAll" :key="item">
        <el-image :src="item" fit="cover"></el-image>
      </el-carousel-item>
    </el-carousel>

    <div class="content">
      <el-card class="box-card" v-for="item in data" :key="item.id">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-image
              v-if="item.img"
              :src="`${baseURL}/static/${item.img}`"
              fit="cover"
              style="width: 14.5rem; height: 14.5rem"
            ></el-image>
          </el-col>
          <el-col :span="18">
            <h1>
              <a href="" @click="jumpDetail(item.id)">{{ item.event_name }}</a>
            </h1>
            <p>
              {{ item.desc }}
            </p>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPartyHistoryList } from '@/network/api'
import { baseURL } from '@/network/request'

export default {
  created () {
    this.getData()
  },
  data () {
    return {
      data: [],
      page: 1,
      size: 20,
      total: 0,
      loading: false,
      baseURL: baseURL,
      imgAll: [
        'http://img.lynu.edu.cn/templates/lynu/2017/images/c.jpg',
        'http://img.lynu.edu.cn/templates/lynu/2017/images/qzjd.jpg',
        'http://img.lynu.edu.cn/templates/lynu/2017/images/yqfk.jpg',
        'http://img.lynu.edu.cn/templates/lynu/2017/images/gczx.jpg',
      ]
    }
  },
  methods: {
    getData () {
      this.loading = true
      getPartyHistoryList({
        page: this.page,
        size: this.size
      }).then(res => {
        if (res.code === 0) {
          if (this.page === 1) {
            this.data = res.data
          } else {
            this.data = [...this.data, ...res.data]
          }
          this.total = res.total
          this.loading = false
        }
      })
    },
    handleScroll (e) {
      const sh = this.$refs.Box.scrollHeight;
      const ch = this.$refs.Box.clientHeight;
      const st = this.$refs.Box.scrollTop;
      if (ch + st >= sh - 400) {
        if (this.data.length < this.total && this.loading == false) {
          this.page += 1;
          this.getData();
        }
      }
    },
    jumpDetail (id) {
      // 跳转至详情页
      window.open(`/detail/${id}`, "_blank");
    },
  }
};
</script>

<style lang="scss" scoped>
.home {
  overflow: auto;
  height: 100vh;
}

.content {
  margin: 2rem 15rem;

  .box-card {
    margin-bottom: 1.5rem;
  }
}
</style>